// 使用 ES 模块导入 protobuf.js 的浏览器版本
import protobuf from 'protobufjs';
import Long from 'long';  // 仍然需要引入 Long 库用于验证阶段
import personJson from '../proto/proto.json'

// 创建一个函数来初始化 protobuf
async function initProtobuf() {
  try {
    // 1. 加载 JSON 描述符
    const personSchema = personJson;
    
    // 2. 从 JSON 创建 root
    const root = protobuf.Root.fromJSON(personSchema);
    
    // 3. 获取消息类型
    const Person = root.lookupType("Person");
    
    // 创建一个表单用于用户输入
    setupUserInterface(Person);
  } catch (error) {
    console.error("初始化失败:", error);
    document.getElementById('output').innerHTML = `
      <div class="error">
        错误: ${error.message}<br>
        请确保 person.json 文件可以通过 HTTP 访问。
      </div>
    `;
  }
}

// 设置用户界面
function setupUserInterface(Person) {
  // 创建表单
  const formHtml = `
    <div class="form-group">
      <label for="name">姓名:</label>
      <input type="text" id="name" value="Alice">
    </div>
    <div class="form-group">
      <label for="id">ID:</label>
      <input type="text" id="id" value="12337581991284842">
    </div>
    <div class="form-group">
      <label for="email">Email (可选):</label>
      <input type="email" id="email">
    </div>
    <div class="form-group">
      <label for="phones">电话号码 (用逗号分隔):</label>
      <input type="text" id="phones" value="123-4567,987-6543">
    </div>
    <button id="encode">编码</button>
  `;
  
  document.getElementById('form-container').innerHTML = formHtml;
  
  // 添加编码按钮事件
  document.getElementById('encode').addEventListener('click', () => {
    // 从表单获取数据
    const personDataRaw = {
      name: document.getElementById('name').value,
      id: document.getElementById('id').value,
      phones: document.getElementById('phones').value.split(',').map(p => p.trim()),
      createTime: Date.now() // 数字时间戳
    };
    const personData = {
      ...personDataRaw,
      id: Long.fromString(personDataRaw.id),     // 使用 Long 表示 id
      createTime: Long.fromNumber(personDataRaw.createTime) // 使用 Long 表示时间戳
    };
    
    const email = document.getElementById('email').value;
    if (email) {
      personData.email = email;
    }
    
    try {
      // 验证数据
      const errMsg = Person.verify(personData);
      if (errMsg) throw new Error(errMsg);
      
      // 创建消息实例
      const person = Person.create(personData);
      
      // 编码为二进制
      const buffer = Person.encode(person).finish();
      
      // 解码
      const decoded = Person.decode(buffer);
      const decodedObject = Person.toObject(decoded, {
        longs: String,
        defaults: true, // 包含默认值
        oneofs: true    // 包含虚拟oneof字段
      });
      // 确保createTime是数字类型
      decodedObject.createTime = Number(decodedObject.createTime);
      console.log(decodedObject)
      // 显示结果
      displayResults(buffer, decodedObject);
    } catch (error) {
      document.getElementById('output').innerHTML = `
        <div class="error">处理错误: ${error.message}</div>
      `;
    }
  });
}

// 显示结果
function displayResults(buffer, decodedObject) {
  // 将 buffer 转换为十六进制字符串以便显示
  const hexString = Array.from(new Uint8Array(buffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join(' ');
  
  const outputHtml = `
    <div class="result-container">
      <h3>序列化结果:</h3>
      <div class="buffer">
        <strong>二进制数据 (十六进制表示):</strong>
        <pre>${hexString}</pre>
      </div>
      
      <h3>反序列化结果:</h3>
      <div class="decoded">
        <pre>${JSON.stringify(decodedObject, null, 2)}</pre>
      </div>
    </div>
  `;
  
  document.getElementById('output').innerHTML = outputHtml;
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initProtobuf);